<template>
	<view>
		<view class="auth">
      <view class="item-cell">
        <view class="left">账号</view>
        <view class="right">
          <input placeholder="请输入6-20位账号" maxlength="20" type="text" v-model="data.username" />
        </view>
      </view>
      <view class="item-cell">
        <view class="left">密码</view>
        <view class="right">
          <input placeholder="请输入6-20位密码" maxlength="20" type="text" v-model="data.password" />
        </view>
      </view>
      <view class="item-cell">
        <view class="left">公司名称</view>
        <view class="right">
          <input placeholder="与营业执照名称保持一致" maxlength="30" type="text" v-model="data.company" />
        </view>
      </view>
      <view class="item-cell">
        <view class="left">姓名</view>
        <view class="right">
          <input placeholder="请输入姓名" maxlength="10" type="text" v-model="data.name" />
        </view>
      </view>
      <view class="item-cell">
        <view class="left">联系电话</view>
        <view class="right">
          <input placeholder="请输入联系电话" maxlength="11" type="mobile" v-model="data.mobile" />
        </view>
      </view>
      <view class="item-cell">
        <view class="left">验证码</view>
        <view class="right">
          <input placeholder="请输入验证码" maxlength="4" type="mobile" v-model="data.code" />
        </view>
        <view  :class="isCounting ? 'item-sms-code-disabled' : 'item-sms-code'"  @click="sendCode" >
          {{ isCounting ? countdown + '秒后重试' : '发送验证码' }}
        </view>
      </view>
      <view class="item-cell">
        <view class="left">地区</view>
        <view class="right" @click="openCityPicker"> {{ (data.province && data.city) ? data.province + data.city : '请选择地区' }} </view>
      </view>
      <view class="item-cell">
        <view class="left">详细地址</view>
        <view class="right">
          <input placeholder="请输入详细地址" type="text" v-model="data.address" />
        </view>
      </view>
      <item style="display: flex;justify-content: space-around;padding: 10rpx 0">
        <view :class="data.type === 1 ? 'item-tag-check' : 'item-tag-nocheck' " @click="data.type = 1">我是厂家</view>
        <view :class="data.type === 2 ? 'item-tag-check' : 'item-tag-nocheck' " @click="data.type = 2">我是经销商</view>
      </item>

      <view class="auth-button flex flex-direction">
        <button class="cu-btn bg-orange sl radius-bock" @click="register">注册</button>
      </view>
      <view class="auth-clause">
        获取验证码代表阅读并同意<text @tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议')">用户协议</text>及<text @tap="onDetails($store.state.common.appConfig.privacy_protection, '隐私保护')">隐私权保护声明</text>
      </view>
<!--			<form @submit="formSubmit">-->
<!--				<view class="auth-group radius-bock bg-gray wlian-grey-light">-->
<!--					<input -->
<!--						placeholder="请输入手机号" -->
<!--						type="number" maxlength="11" -->
<!--						confirm-type="next" -->
<!--						placeholder-class="placeholder" -->
<!--						name="mobile"-->
<!--						v-model="mobile"-->
<!--						@input="onKeyInput"-->
<!--					></input>-->
<!--				</view>-->
<!--				<view class="auth-button flex flex-direction">-->
<!--					<button class="cu-btn bg-orange sl radius-bock" formType="submit" :disabled="submitDisabled">获取验证码</button>-->
<!--				</view>-->
<!--				<view class="auth-clause">-->
<!--					获取验证码代表阅读并同意<text @tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议')">用户协议</text>及<text @tap="onDetails($store.state.common.appConfig.privacy_protection, '隐私保护')">隐私权保护声明</text>-->
<!--				</view>-->
<!--			</form>-->
		</view>
		<view class="auth-foot">
			<view class="menu text-grey">
				<text @tap="auth">登录</text>
				<text @tap="help">帮助</text>
			</view>
		</view>

    <lb-picker
        :list="cityData"
        :props="cityMap"
        :level="3"
        mode="multiSelector"
        @confirm="cityConfirm"
        ref="cityPicker">
    </lb-picker>
	</view>
</template>
<script>
import LbPicker from '@/components/lb-picker'
import graceChecker from '@/common/graceChecker';//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
export default {
  components: {LbPicker},
	data() {
		return {
			submitDisabled: true,
			title: '表单验证',
			pageroute: '',
			mobile: '',
      cityData:[],
      cityMap:{
        label: 'name',
        children: 'city'
      },
      data:{
        username:'',
        password:'',
        company:'',
        name:'',
        mobile:'',
        code:'',
        province:'',
        city:'',
        address:'',
        type:1,
      },
      countdown: 60,
      isCounting: false
		};
	},
	onLoad(options) {
		this.pageroute = options.url;
    console.log(this.pageroute)
		if (options.mobile) {
			this.data.mobile = options.mobile;
			this.submitDisabled = false;
		}
    this.getCityData()
	},
	methods: {
    getCityData(){
      uni.request({
        url: 'https://www.xiushibang.com/uploads/city.json',
        success: (res) => {
          this.cityData = res.data
        }
      });
    },
    openCityPicker(){
      this.$refs.cityPicker.show() // 显示
    },
    // ... 添加倒计时方法
    startCountdown() {
      this.isCounting = true;
      this.countdown = 60;
      const timer = setInterval(() => {
        if(this.countdown > 0) {
          this.countdown--;
        } else {
          this.isCounting = false;
          clearInterval(timer);
        }
      }, 1000);
    },
    cityConfirm(e){
      var value = e.value
      var valueName = []
      for(var i=0;i<value.length;i++){
        valueName.push(e.item[i].name)
      }
      this.data.province = valueName[0]
      this.data.city = valueName[1]
    },
    sendCode(){
      //正则验证手机号
      if(!/^1[3-9]\d{9}$/.test(this.data.mobile)){
        this.$wanlshop.msg('请输入正确的手机号');
      }else{
        this.$api.get({
			    url: '/sms/send',
				data:{
					event: 'register',  
					mobile: this.data.mobile
				},
				loadingTip: '验证码发送中...',
        success: res => {
          this.$wanlshop.msg('验证码发送成功');
          this.startCountdown(); // 开始倒计时
        }
			});
      }
    },
    register(){
      const _that = this
      if(!/^1[3-9]\d{9}$/.test(this.data.mobile)){
        this.$wanlshop.msg('请输入正确的手机号');
      }else if(!this.data.code){
        this.$wanlshop.msg('请输入验证码');
      }else if(this.data.username.length < 6 || this.data.username.length > 20){
        this.$wanlshop.msg('请输入6-20位账号');
      }else if(this.data.password.length < 6 || this.data.password.length > 20){
        this.$wanlshop.msg('请输入6-20位密码');
      }else if(!this.data.company){
        this.$wanlshop.msg('请输入公司名称');
      }else if(!this.data.name){
        this.$wanlshop.msg('请输入姓名');
      }else if(!this.data.province || !this.data.city){
        this.$wanlshop.msg('请选择地区');
      }else if(!this.data.address){
        this.$wanlshop.msg('请输入详细地址');
      }else if(!this.data.type){
        this.$wanlshop.msg('请选择类型');
      }else{
        this.$api.post({
					url: '/user/register',
					data: this.data,
					success: res => {
            _that.$store.dispatch('user/login', res);
            _that.$store.dispatch('cart/login');
            _that.$store.dispatch('chat/get');
            uni.reLaunch({url: decodeURIComponent(this.pageroute)});
					},
					fail: res => {
						this.$wanlshop.msg(res);
					}
				});
      }
    },
		onKeyInput: function(e) {
			this.submitDisabled = false
		},
		formSubmit: function(e) {
			// 检查手机号是否被注册
			
			//定义表单规则
			var rule = [
				{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }
			];
			//进行表单检查
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if (checkRes) {
				this.$api.get({
					url: '/wanlshop/validate/check_mobile_available',
					data: {
						mobile: this.mobile
					},
					success: res => {
						this.$wanlshop.to(`validcode?event=register&mobile=${e.detail.value.mobile}&url=${this.pageroute}`,'slide-in-bottom',200);
					},
					fail: res => {
						uni.showModal({
						    title: '手机号已被注册',
						    content: '点击确定使用手机号登录',
						    success: (msg)=> {
						        if (msg.confirm) {
						           this.$wanlshop.to(`phone?mobile=${e.detail.value.mobile}&url=${this.pageroute}`,'slide-in-bottom',200);
						        } else if (msg.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}
				});
				
			} else {
				this.$wanlshop.msg(graceChecker.error);
			}
		},
		auth() {
			this.$wanlshop.to(`auth?url=${this.pageroute}`);
		},
		help() {
			this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
		}
	}
};
</script>

<style>
@import url("auth.css");
.item-cell{
  display: flex;
  height: 80rpx;
  align-items: center;
  border-bottom: 1rpx solid #f2f4f6;
}
.item-cell .left{
  width: 200rpx
}
.item-cell .right{
  flex: 1
}
.item-tag-check{
  width: 250rpx;
  height: 70rpx;
  border-radius: 10rpx;
  line-height: 70rpx;
  text-align: center;
  background-color: #fe6600;
  color: white;
}
.item-tag-nocheck{
  width: 250rpx;
  height: 70rpx;
  border-radius: 10rpx;
  line-height: 70rpx;
  text-align: center;
  background-color: #ccc;
  color: black;
}


.item-sms-code{
  width: 150rpx;
  height: 60rpx;
  border-radius: 10rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #fe6600;
  color: white;
}
.item-sms-code-disabled{
  width: 150rpx;
  height: 60rpx;
  border-radius: 10rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #ccc;
  color: black;
}

</style>
